<template>
  <div class="radar-container">
    <div class="weather-button" @click="handleActive('weather')">雷达操控</div>
    <!-- 气象 -->
    <div class="weather-content" v-if="activeType === 'weather'">
      <div
        class="item"
        v-for="(item, index) in weatherList"
        :key="index"
        :class="{ active: active === index }"
        @click="handleSelect(item, index)"
      >
        <p>{{ item.label }}</p>
      </div>
    </div>
    <div class="wind-content" v-else-if="activeType === 'wind'">
      <div class="number">{{ wind }}</div>
      <el-slider
        v-model="wind"
        vertical
        :step="1"
        show-stops
        :max="18"
        height="250px"
      >
      </el-slider>
    </div>
  </div>
</template>

<script>
// import { setWeather } from "@/api/apra";
export default {
  data() {
    return {
      weatherList: [
        {
          label: "原始波",
          value: 0,
        },
        {
          label: "去除海浪",
          value: 1,
        },
        {
          label: "去除岸基",
          value: 2,
        },
        {
          label: "范围显示",
          value: 3,
        },
      ],
      active: 0,
      wind: 0,
      activeType: "",
      windTime: null,
    };
  },
  methods: {
    handleSelect(row, index) {
      this.active = index;
      // setWeather({ weather: row.value }).then(() => {});
    },
    handleActive(type) {
      if (this.activeType === type) {
        this.activeType = "";
      } else {
        this.activeType = type;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.radar-container {
  position: absolute;
  bottom: 160px;
  left: 20px;
  .weather-button {
    background-color: #fff;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 3px;
    cursor: pointer;
  }
}
.weather-content {
  position: fixed;
  bottom: 60px;
  left: 130px;
  background-color: #fff;
  border-radius: 3px;
  .item {
    display: flex;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    &:hover {
      color: #0255a5;
    }
    &:last-of-type {
      border-bottom: 0;
    }
    i {
      width: 20px;
      font-size: 20px;
    }
    p {
      margin: 0 0 0 0;
    }
  }
  .active {
    background-color: #0255a5;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
.wind-content {
  position: fixed;
  bottom: 60px;
  left: 130px;
  height: 320px;
  background-color: #fff;
  border-radius: 3px;
  padding: 15px 10px;
  .number {
    text-align: center;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
  }
}
</style>
